'use client';
import './App.css'
import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';

export default function HomePage() {
    // 滚动动画状态管理
    const [isScrolledToFeatures, setIsScrolledToFeatures] = useState(false);
    const [isScrolledToServices, setIsScrolledToServices] = useState(false);
    const [isScrolledToAbout, setIsScrolledToAbout] = useState(false);
    const [isScrolledToContact, setIsScrolledToContact] = useState(false);

    // 监听滚动到各个区域
    useEffect(() => {
        const handleScroll = () => {
            // 特性区域
            const featuresSection = document.getElementById('features');
            if (featuresSection) {
                const rect = featuresSection.getBoundingClientRect();
                setIsScrolledToFeatures(rect.top < window.innerHeight * 0.7);
            }

            // 服务区域
            const servicesSection = document.getElementById('services');
            if (servicesSection) {
                const rect = servicesSection.getBoundingClientRect();
                setIsScrolledToServices(rect.top < window.innerHeight * 0.7);
            }

            // 关于我们区域
            const aboutSection = document.getElementById('about');
            if (aboutSection) {
                const rect = aboutSection.getBoundingClientRect();
                setIsScrolledToAbout(rect.top < window.innerHeight * 0.7);
            }

            // 联系我们区域
            const contactSection = document.getElementById('contact');
            if (contactSection) {
                const rect = contactSection.getBoundingClientRect();
                setIsScrolledToContact(rect.top < window.innerHeight * 0.7);
            }
        };

        window.addEventListener('scroll', handleScroll);
        // 初始检查一次，确保页面加载时可见区域的元素能正确显示
        handleScroll();

        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <div className="page-container">
            {/* 主视觉区域 */}
            <section id="home" className="hero-section">
                <div className="bg-decoration-primary"></div>
                <div className="bg-decoration-secondary"></div>

                <div className="container">
                    <div className="title-container">
                        <h1 className="main-title">
                            <span className="block parallax" data-depth="0.1">连接知识 </span>
                            <span
                                className="block parallax text-gradient"
                                style={{ backgroundImage: 'linear-gradient(90deg, #165DFF, #722ED1)' }}
                                data-depth="0.2"
                            >
                洞察未来
              </span>
                        </h1>

                        <p className="subtitle">
                            利用前沿技术，连接全球知识网络，为您提供洞察未来的智慧与工具
                        </p>

                        <div className="cta-buttons">
                            <Link href="/product" className="primary-btn">
                                探索产品 <i className="fa fa-arrow-right"></i>
                            </Link>
                            <Link href="#" className="secondary-btn">
                                了解更多 <i className="fa fa-info-circle"></i>
                            </Link>
                        </div>
                    </div>
                </div>

                <div className="scroll-indicator">
                    <Link href="#features">
                        <i className="fa fa-chevron-down"></i>
                    </Link>
                </div>
            </section>

            {/* 特性展示区域 */}
            <section id="features" className="features-section">
                <div className="container">
                    <div className="section-title animate-on-scroll">
                        <h2>我们的优势</h2>
                        <p>专注于为您提供最前沿的知识连接与智能洞察解决方案</p>
                    </div>

                    <div className="features-grid">
                        <div className={`feature-card animate-on-scroll ${isScrolledToFeatures ? 'visible' : ''}`}>
                            <div className="feature-icon-container">
                                <i className="fa fa-link feature-icon"></i>
                            </div>
                            <h3 className="feature-title">知识连接</h3>
                            <p className="feature-desc">打破信息孤岛，智能连接全球知识网络，让知识流动更高效。</p>
                        </div>

                        <div className={`feature-card animate-on-scroll ${isScrolledToFeatures ? 'visible' : ''}`} style={{ transitionDelay: '0.2s' }}>
                            <div className="feature-icon-container second">
                                <i className="fa fa-search feature-icon second"></i>
                            </div>
                            <h3 className="feature-title">智能洞察</h3>
                            <p className="feature-desc">利用AI技术分析海量数据，挖掘隐藏趋势，为您提供深度洞察。</p>
                        </div>

                        <div className={`feature-card animate-on-scroll ${isScrolledToFeatures ? 'visible' : ''}`} style={{ transitionDelay: '0.4s' }}>
                            <div className="feature-icon-container third">
                                <i className="fa fa-rocket feature-icon third"></i>
                            </div>
                            <h3 className="feature-title">未来导向</h3>
                            <p className="feature-desc">基于前沿技术和趋势分析，帮助您提前布局，把握未来发展机遇。</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* 服务展示区域 */}
            <section id="services" className="services-section">
                <div className="container">
                    <div className={`section-title animate-on-scroll ${isScrolledToServices ? 'visible' : ''}`}>
                        <h2>我们的服务</h2>
                        <p>提供全方位的知识管理与智能分析解决方案</p>
                    </div>

                    <div className="services-content">
                        <div className={`services-list animate-on-scroll ${isScrolledToServices ? 'visible' : ''}`}>
                            <div className="service-item">
                                <div className="service-icon primary">
                                    <i className="fa fa-database"></i>
                                </div>
                                <div className="service-text">
                                    <h3>数据整合与分析</h3>
                                    <p>将分散的数据源进行智能整合，通过AI算法挖掘有价值的信息和洞察。</p>
                                </div>
                            </div>

                            <div className="service-item">
                                <div className="service-icon secondary">
                                    <i className="fa fa-line-chart"></i>
                                </div>
                                <div className="service-text">
                                    <h3>趋势预测与洞察</h3>
                                    <p>基于历史数据和实时信息，预测行业趋势，帮助您做出前瞻性决策。</p>
                                </div>
                            </div>

                            <div className="service-item">
                                <div className="service-icon accent">
                                    <i className="fa fa-users"></i>
                                </div>
                                <div className="service-text">
                                    <h3>知识社区与协作</h3>
                                    <p>建立专业知识社区，促进团队协作与知识共享，提升组织创新能力。</p>
                                </div>
                            </div>
                        </div>

                        <div className={`service-image animate-on-scroll ${isScrolledToServices ? 'visible' : ''}`} style={{ transitionDelay: '0.3s' }}>
                            <div className="image-border-1"></div>
                            <div className="image-border-2"></div>
                            <Image
                                src="/images/zhshtp1.png"
                                alt="数据可视化与分析"
                                width={800}
                                height={600}
                                priority
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* 关于我们 */}
            <section id="about" className="about-section">
                <div className="container">
                    <div className="about-content">
                        <div className={`about-image animate-on-scroll ${isScrolledToAbout ? 'visible' : ''}`}>
                            <div className="image-border-1"></div>
                            <div className="image-border-2"></div>
                            <Image
                                src="/images/zhshtp2.png"
                                alt="我们的团队"
                                width={800}
                                height={600}
                            />
                        </div>

                        <div className={`about-text animate-on-scroll ${isScrolledToAbout ? 'visible' : ''}`} style={{ transitionDelay: '0.3s' }}>
                            <h2 className="text-3xl font-bold mb-4">关于稳网互联</h2>
                            <p className="text-muted mb-4">
                                稳网互联成立于2020年，是一家专注于知识连接与智能分析的科技公司。我们致力于利用前沿技术，打破信息壁垒，帮助个人和组织更高效地获取、整合和利用知识资源。
                            </p>
                            <p className="text-muted mb-6">
                                我们的团队由数据科学家、AI工程师和行业专家组成，拥有丰富的跨领域经验。我们相信，通过智能技术与专业知识的结合，可以为客户创造更大的价值。
                            </p>

                            <div className="about-stats">
                                <div className="stat-item">
                                    <div className="stat-value">100+</div>
                                    <div className="stat-label">企业客户</div>
                                </div>
                                <div className="stat-item">
                                    <div className="stat-value">10M+</div>
                                    <div className="stat-label">知识节点</div>
                                </div>
                                <div className="stat-item">
                                    <div className="stat-value">98%</div>
                                    <div className="stat-label">客户满意度</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 联系我们 */}
            <section id="contact" className="contact-section">
                <div className="container">
                    <div className={`section-title animate-on-scroll ${isScrolledToContact ? 'visible' : ''}`}>
                        <h2>联系我们</h2>
                        <p>无论您有任何问题或需求，我们都很乐意听取您的意见</p>
                    </div>

                    <div className="contact-content">
                        <div className={`contact-form animate-on-scroll ${isScrolledToContact ? 'visible' : ''}`}>
                            <h3>发送消息</h3>
                            <form>
                                <div className="form-group">
                                    <label htmlFor="name">姓名</label>
                                    <input type="text" id="name" className="form-control" />
                                </div>

                                <div className="form-group">
                                    <label htmlFor="email">邮箱</label>
                                    <input type="email" id="email" className="form-control" />
                                </div>

                                <div className="form-group">
                                    <label htmlFor="message">消息</label>
                                    <textarea id="message" className="form-control"></textarea>
                                </div>

                                <button type="submit" className="submit-btn">发送消息</button>
                            </form>
                        </div>

                        <div className={`contact-info animate-on-scroll ${isScrolledToContact ? 'visible' : ''}`} style={{ transitionDelay: '0.3s' }}>
                            <div className="contact-details">
                                <h3>联系方式</h3>
                                <div className="contact-item">
                                    <div className="contact-icon">
                                        <i className="fa fa-map-marker"></i>
                                    </div>
                                    <div className="contact-text">
                                        <h4>地址</h4>
                                        <p>北京市海淀区中关村科技园区</p>
                                    </div>
                                </div>

                                <div className="contact-item">
                                    <div className="contact-icon">
                                        <i className="fa fa-envelope"></i>
                                    </div>
                                    <div className="contact-text">
                                        <h4>邮箱</h4>
                                        <p>contact@wenwanghulian.com</p>
                                    </div>
                                </div>

                                <div className="contact-item">
                                    <div className="contact-icon">
                                        <i className="fa fa-phone"></i>
                                    </div>
                                    <div className="contact-text">
                                        <h4>电话</h4>
                                        <p>+86 10 8888 8888</p>
                                    </div>
                                </div>
                            </div>

                            <div className="social-links">
                                <h3>关注我们</h3>
                                <div className="social-icons">
                                    <a href="#" className="social-icon">
                                        <i className="fa fa-weixin"></i>
                                    </a>
                                    <a href="#" className="social-icon">
                                        <i className="fa fa-weibo"></i>
                                    </a>
                                    <a href="#" className="social-icon">
                                        <i className="fa fa-linkedin"></i>
                                    </a>
                                    <a href="#" className="social-icon">
                                        <i className="fa fa-github"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}
